<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>信息中心</el-breadcrumb-item>
      <el-breadcrumb-item>公告通知</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="公告通知" name="first">

          <template>
            <div v-for='(v,i) in informData' :key="v.notice_id">
              <span @click="open(i,informData)">{{v.notice_title}}</span>
              <el-divider></el-divider>

            </div>
          </template>

        </el-tab-pane>
        <el-tab-pane label="公司新闻" name="second">

          <template>
            <div v-for='(v,i) in newsData' :key='v.notice_id'>
              <span @click="open(i,newsData)">{{v.notice_title}}</span>
              <el-divider></el-divider>

            </div>
          </template>

        </el-tab-pane>
        <el-tab-pane label="规章制度" name="third">

          <template>
            <div v-for='(v,i) in rulesData' :key='v.notice_id'>
              <span @click="open(i,rulesData)">{{v.notice_title}}</span>
              <el-divider></el-divider>

            </div>
          </template>

        </el-tab-pane>
        <el-tab-pane label="办事指南" name="fourth">
          <template>
            <div v-for='(v,i) in instructionData' :key='v.notice_id'>
              <span @click="open(i,instructionData)">{{v.notice_title}}</span>
              <el-divider></el-divider>

            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: '',
      activeName: "first",
      showData: [],
      informData: [{
        notice_title: '',
        notice_id: ''
      }],//公告通知数组
      newsData: [{
        notice_title: '',
        notice_id: ''
      }],//公司新闻数组
      rulesData: [{
        notice_title: '',
        notice_id: ''
      }],//规章制度数组
      instructionData: [{
        notice_title: '',
        notice_id: ''
      }],//办事指南数组
    }
  },
  methods: {
    handleChange: function () {

    },
    handleClick: function () {

    },
    open(i, data) {
      // console.log(id);
      this.$alert(`${data[i].notice_content}`, `${data[i].notice_title}`, {
        confirmButtonText: '确定',


      });
    },
    getNew() {
      this.$axios({
        url: '/information/getNew',
      }).then((res) => {

        this.showData = res.data.data
        // console.log(this.showData);
        //公告通知数组
        let informData = [];
        for (let i = 0; i < this.showData.length; i++) {
          if (this.showData[i].notice_className == '公告通知') {
            informData.push(this.showData[i])
          }
        }
        this.informData = informData;
        //console.log(this.informData[0].notice_className);
        //公司新闻数组
        let newsData = []
        for (let i = 0; i < this.showData.length; i++) {
          if (this.showData[i].notice_className == '公司新闻') {
            newsData.push(this.showData[i])
          }
        }
        this.newsData = newsData
        //规章制度数组
        let rulesData = []
        for (let i = 0; i < this.showData.length; i++) {
          if (this.showData[i].notice_className == '规章制度') {
            rulesData.push(this.showData[i])
          }
        }
        this.rulesData = rulesData;
        //办事指南数组
        let instructionData = []
        for (let i = 0; i < this.showData.length; i++) {
          if (this.showData[i].notice_className == '办事指南') {
            instructionData.push(this.showData[i])
          }
        }
        this.instructionData = instructionData
      })
    }
  },
  mounted() {
    this.getNew();
    //console.log((this.informData[0]), this.newsData, this.rulesData, this.instructionData);
  },
}
</script>

<style scoped>
#content {
  margin-top: 20px;
  background-color: white;
  padding-top: 30px;
  padding-left: 30px;
}
#content span {
  cursor: pointer;
}
</style>